<template>
  <loadingStatus :spinning="loadStatus">
    <div class="schedule-wrapper">
      <div class="sidebar">
        <side-bar></side-bar>
      </div>
      <div class="schedule-inner-container">
        <div class="main">
          <div class="category_container">
            <Category :list="categoryList" @selection-change="handleSelectionChange" />
          </div>
          <div class="list">
            <Header @selectDate="selectDate" @matchStatusHandle="matchStatusHandle" />
            <div v-for="(res, index) in list" :key="res.id">
              <LiveMatchItem
                :index="index"
                :leagueName="res.leagueName"
                :status="res.matchState"
                :avatars="res.anchorList"
                :time="res.matchTime"
                :team1="res.homeTeamName"
                :team2="res.awayTeamName"
                :score1="res.homeTeamScore"
                :score2="res.awayTeamScore"
                buttonText="去观看"
                :id="res.matchId"
                :type="res.sportId"
              />
            </div>
          </div>
        </div>
      </div></div
  ></loadingStatus>
</template>
<script setup>
import Header from './header.vue'
import LiveMatchItem from './item.vue'
import Category from './category.vue'
import { ref, onMounted } from 'vue'
import pako from 'pako'
import dayjs from 'dayjs'
import { getScheduleList } from '@/api/home'
import sideBar from '@/components/sideBar.vue'
import loadingStatus from '@/components/loadingStatus.vue'
const list = ref([])
const originList = ref([])
const categoryList = ref([])
const hasLive = ref(true)
// 追踪选中的运动类型和联赛
const selectedSport = ref(null)
const selectedLeague = ref(null)
const loadStatus = ref(false)

const handleSelectionChange = ({ sportId, leagueId }) => {
  selectedSport.value = sportId
  selectedLeague.value = leagueId
  if (!leagueId) {
    list.value = originList.value
    return
  }
  // 在这里执行过滤逻辑或其他操作
  console.log(`选中的运动类型ID: ${sportId}, 联赛ID: ${leagueId}`)
  list.value = originList.value.filter((val) => {
    if (val.leagueId === leagueId) {
      return val
    }
  })
}

const getData = async (date) => {
  loadStatus.value = true
  try {
    const res = await getScheduleList({
      startDate: dayjs(date).format('YYYY-MM-DD')
    })
    console.log(res, 'res')
    if (res.code === 200) {
      const binaryString = atob(res.data)
      const charData = binaryString.split('').map((char) => char.charCodeAt(0))
      const binData = new Uint8Array(charData)

      // 解压缩数据
      const decompressedData = pako.ungzip(binData, { to: 'string' })
      // list.value = JSON.parse(decompressedData)
      const parseData = JSON.parse(decompressedData)
      console.log(parseData, 'parseData')
      if (hasLive.value) {
        list.value = parseData.matchList.filter((val) => {
          if (val.matchState === 2) {
            return val
          }
        })
      } else {
        list.value = parseData.matchList
      }
      originList.value = parseData.matchList
      categoryList.value = parseData.sportList
    }
  } catch (error) {
    console.log(error, 'error')
  }
  loadStatus.value = false
}

const selectCategory = (item) => {}

const selectDate = (res) => {
  const isToday = dayjs().isSame(dayjs(res), 'day')
  if (isToday) {
    hasLive.value = true
  } else {
    hasLive.value = false
  }
  getData(res)
}
const matchStatusHandle = (res) => {
  console.log(res, 'res')
  console.log(originList.value, 'originList.value')
  if (res === 1) {
    list.value = originList.value.filter((val, index) => {
      if (val.matchState === 2) {
        return val
      }
    })
  } else {
    list.value = originList.value.filter((val, index) => {
      return val
    })
  }
}

onMounted(() => {
  getData(dayjs().format())
})
</script>
<style lang="scss" scoped>
.schedule-wrapper {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 70px);
  background: #f5f7ff;
  .schedule-inner-container {
    max-width: 1200px;
    margin: 0 auto;
  }
}
.main {
  display: flex;
  padding-top: 30px;
  // width: 1200px;
  .category_container {
    position: sticky;
    top: 70px;
    height: 710px;
  }
}
.list {
  // width: 100%;
  margin: 0 auto;
  width: 940px;
  // height: 120px;
}
</style>
